<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>
<!--
    v-on:事件类型     实现事件绑定
    单击事件          v-on:click="changeAge"     changeAge 回调函数   methods配置选项中
    双击事件          v-on:dblclick="changeAge"
-->
<div id="app">
    <p>age:{{ age }}</p>
    <button v-on:click="changeAge">age+1</button>
    <button v-on:click="changeAge2(5)">改变age</button>
    <button v-on:dblclick="changeAge">age+1</button>
</div>


<script>
    /*
    *  单击按钮  age+1
    *  1. 绑定按钮的单击事件
    *  2. 编写单击事件回调函数
    *  3. 如何在回调函数中改变配置项data中的age值

    *  数据代理 ：
    *     1.在生成vue实例时配置选项data中的数据  会被vue实例代理vm
    *     2. vm会自动将data中配置的属性值添加在自身
    *
    *   vm :age     =>  data:{age:10}
    *   set() => data:{age:10}      vm.age+1
    *   get() => data:{age:10}      vm.age
    * */
    let vm = new Vue({
        el: '#app',
        data: {
            age: 20,
            info:"hello vue"
        },
        methods: {   // 事件的函数
            changeAge:function (){
                //   改变age的值   +1
                console.log(vm)
                console.log(this)
                console.log(this==vm)  //   在函数中使用this指代的就是vm实例
                // console.log(vm.age)
                // console.log(vm.info)
                // console.log(vm._data.age)
                // vm._data.age = vm._data.age+1
                // vm.age+=1
                this.age+=1
            },
            changeAge2:function (number){
                this.age+=number
            }
        }
    })

</script>
</body>
</html>